<template>
	<view class="imgbox">
		<page-head :transparent='false'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
		</page-head>
		<view class="banner">
			<image :src="banner1" mode="widthFix"></image>
		</view>
		<view class="box-size">
			<view class="box" v-for="(item, i) in imgList" :key="i">
				<image 
						:src="item.zt" 
						mode="widthFix" 
						@click="linkTo(item.url,i)">
				</image>
			</view>
		</view>
		<view class="box-size2">
			<image :src="zthdy1" mode="widthFix"></image>
		</view>
		<view class="box2" >
			<image 
					v-for="(item, i) in imgList2" 
					:key="i" :src="item.zt" 
					mode="widthFix" 
					@click="linkTo(item.url,i)">
			</image>
		</view>
		<view class="banner">
			<image :src="banner2" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import xubanner1 from '../../static/img/xhj/xubanner1.png'
	import zthdy1 from '../../static/img/xhj/zthdy1.png'
	import xubanner2 from '../../static/img/xhj/xubanner2.png'

	import zt1 from '../../static/img/xhj/zt1.png'
	import zt2 from '../../static/img/xhj/zt2.png'
	import zt3 from '../../static/img/xhj/zt3.png'

	import zt21 from '../../static/img/xhj/zt21.png'
	import zt22 from '../../static/img/xhj/zt22.png'
	import zt23 from '../../static/img/xhj/zt23.png'
	import zt24 from '../../static/img/xhj/zt24.png'
	import zt25 from '../../static/img/xhj/zt25.png'
	import zt26 from '../../static/img/xhj/zt26.png'
	import zt27 from '../../static/img/xhj/zt27.png'
	import zt28 from '../../static/img/xhj/zt28.png'
	import zt29 from '../../static/img/xhj/zt29.png'
	import zt210 from '../../static/img/xhj/zt210.png'
	import zt211 from '../../static/img/xhj/zt211.png'
	import zt212 from '../../static/img/xhj/zt212.png'

	export default {
		data() {
			return {
				title: '洗护节活动',
				banner1: xubanner1,
				banner2: xubanner2,
				zthdy1: zthdy1,
				imgList: [
					{
						zt: zt1,
						url: '../selfdetail/selfdetail?skuId=7479&cid=70&title=cocovel蔻露薇 柔雅迷漾香水香氛洗沐套装（洗发水750ml+沐浴露750ml)格拉斯系列&seller=京东自营'
					},
					{
						zt: zt2,
						url: '../selfdetail/selfdetail?skuId=7500&cid=323&title=当妮 Downy 护衣留香珠 洗衣香水（红玫瑰香）150g 护理剂 配合洗衣液使用 不加柔顺剂也能持久留香&seller=好品购'
					},
					{
						zt: zt3,
						url: '../selfdetail/selfdetail?skuId=7486&cid=322&title=怡丽 新素肌感 敏感肌系列卫生巾 日夜组合装12包（240mm*64片+410mm*12片+180mm*8片）（新老包装随机发放）&seller=好品购'
					},
				],
				imgList2: [
					{
						zt: zt21,
						url: '../selfdetail/selfdetail?skuId=3169&cid=592&title=资生堂珊珂（SENKA）绵润泡沫洁面乳120g&seller=京东自营'
					},
					{
						zt: zt22,
						url: '../selfdetail/selfdetail?skuId=2689&cid=400&title=悠珂思（ukiss）卸妆膏柚子雪沙净柔卸妆霜100g&seller=京东自营'
					},
					{
						zt: zt23,
						url: '../selfdetail/selfdetail?skuId=7487&cid=70&title=施丹兰（STENDERS）玫瑰泡泡沐浴露 250ml（超多泡泡沐浴液 泡澡精油 拉脱维亚进口）&seller=好品购'
					},
					{
						zt: zt24,
						url: '../selfdetail/selfdetail?skuId=7498&cid=70&title=凡士林(Vaseline)倍护芦荟舒缓润肤露优惠套装 润肤露400ml+100ml送30ml(新老包装随机发货)&seller=好品购'
					},
					{
						zt: zt25,
						url: '../selfdetail/selfdetail?skuId=7499&cid=320&title=阿道夫（ADOLPH）轻柔丝滑洗护组合3件套（洗发水420ml*2+护发素420ml）送旅行装*3&seller=好品购'
					},
					{
						zt: zt26,
						url: '../selfdetail/selfdetail?skuId=7482&cid=70&title=阿迪达斯 Adidas 男士沐浴套装（冰点250ml+激情250ml+运动后舒缓250ml）&seller=好品购'
					},
					{
						zt: zt27,
						url: '../selfdetail/selfdetail?skuId=7485&cid=320&title=清扬(CLEAR)男士去屑洗发水套装 清爽控油型500gx2送随机香型小样100g(新老包装随机发货)(氨基酸洗发)&seller=好品购'
					},
					{
						zt: zt28,
						url: '../selfdetail/selfdetail?skuId=7501&cid=323&title=渍无踪Vanish 漂*屏蔽的关键字*1kg 英国原装进口 漂白剂 白色衣物强效去渍去黄护色亮白洗衣粉 婴儿童衣物深层去污&seller=好品购'
					},
					{
						zt: zt29,
						url: '../selfdetail/selfdetail?skuId=7484&cid=323&title=立白天然茶籽除螨除菌洗衣液12斤（2kg×2+1kg×2瓶）除菌除螨 温和守护&seller=好品购'
					},
					{
						zt: zt210,
						url: '../selfdetail/selfdetail?skuId=7502&cid=322&title=芳芯（femfresh）经典款女性私处洗液护理凝胶私密弱酸沐浴露洋甘菊日常型250ml英国原装进口&seller=好品购'
					},
					{
						zt: zt211,
						url: '../selfdetail/selfdetail?skuId=7514&cid=322&title=高洁丝（Kotex） 亲亲棉 透气无感 迷你卫生巾(10片*6包装)&seller=京东自营'
					},
					{
						zt: zt212,
						url: '../selfdetail/selfdetail?skuId=7503&cid=322&title=娜菲 卫生巾组合 磁性负离子磁护理棉面姨妈巾周期组合 4包56片（日用10片*2+夜用8片*1+护垫28片*1）&seller=好品购'
					},
				]
			}
		},
		onLoad() {
			window.genCommonData()
		},
		methods: {
			linkTo(url,index) {
				if (url !== '') {
					console.log('index===' + (parseInt(index) + parseInt(1)));
					onEvent('page_home_top_banner1_goods' + (parseInt(index) + parseInt(1)));
					setTimeout(function() {
						if (url !== '') {
							h5NavigateTo({
								url: decodeURI(url)
							});
						}
					}, 1000);
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.imgbox {
		width: 100%;

		.box-size {
			width: 100%;

			.box {
				width: 100%;
				overflow: hidden;
				overflow-y: auto;
				
				image {
					width: 100%;
					display: block;
				}
			}
		}
		
		.box-size2{
			width: 100%;
			
			image {
				width: 100%;
				display: block;
			}
			
		}
		
		.box2 {
			width: 100%;
			overflow: hidden;
			overflow-y: auto;
			display: flex;
			flex-flow: wrap;
			
			image{
				width: 50%;
				display: block;
			}
		}
		
		.banner {
			width: 100%;
			overflow: hidden;
			overflow-y: auto;

			image {
				width: 100%;
				display: block;
			}
		}
	}
</style>
